<template>
    <i-form ref="formvalidate" :label-width="80" :model="formValidate" :rules="ruleValidate">
        <Form-item label="项目名称" prop="name">
            <i-input v-model="formValidate.name" placeholder="请输入项目名称"></i-input>
        </Form-item>
        <FormItem label="项目分类" prop="city">
            <Select v-model="formValidate.city" placeholder="Select your city">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
            </Select>
        </FormItem>
        <Form-item label="项目地址" prop="displayName">
            <i-input v-model="formValidate.displayName" placeholder="请输入项目地址"></i-input>
        </Form-item>
         <Form-item label="负责人" >
            <Select v-model="formValidate.normalizedName" multiple style="width:260px" prop="displayName">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="管理员" >
            <Select v-model="formValidate.normalizedName" multiple style="width:260px" prop="displayName">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="项目成员" >
            <Select v-model="formValidate.normalizedName" multiple style="width:260px" prop="displayName">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="起始时间">
            <Row>
                <i-col span="11">
                    <Form-item >
                        <Date-picker type="date" placeholder="选择日期" v-model="formValidate.description"></Date-picker>
                    </Form-item>
                </i-col>
            </Row>
        </Form-item>
        <Form-item label="激活角色" prop="isStatic">
            <RadioGroup v-model="formValidate.isStatic">
              <Radio label=true>是</Radio>
              <Radio label=false>否</Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="角色描述">
            <i-input v-model="formValidate.permissions" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入相关内容，不能少于20字。。。"></i-input>
        </Form-item>
        <!-- <Form-item>
            <i-button type="primary" @click="handleSubmit">提交</i-button>
            <i-button type="ghost" @click="handleReset" style="margin-left: 8px">重置</i-button>
        </Form-item> -->
    </i-form>
</template>
<script>
import Util from "../../../../libs/util";
export default {
  data() {
    return {
      formValidate: {
        name: "",
        displayName: "",
        normalizedName: [],
        description: "",
        isStatic: "",
        permissions: "",
        city:''
      },
      ruleValidate: {
        name: [{ required: true, message: "任务名不能为空", trigger: "blur" }],
        displayName: [
          { required: true, message: "负责人姓名不能为空", trigger: "blur" }
        ],
        normalizedName: [
          { required: true, message: "请选择任务成员", trigger: "change" }
        ],
        isStatic: [
          { required: true, message: "请选择是否激活任务", trigger: "change" }
        ],
        // interest: [
        //     { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
        //     { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
        // ],
        description: [
          {
            required: true,
            type: "date",
            message: "请选择日期",
            trigger: "change"
          }
        ],
        permissions: [
          { required: true, message: "请输入任务简介", trigger: "blur" },
          {
            type: "string",
            min: 20,
            message: "介绍不能少于20字",
            trigger: "blur"
          }
        ]
      },
      cityList: [
        {
          value: "zs",
          label: "张三"
        },
        {
          value: "LS",
          label: "李四"
        },
        {
          value: "WW",
          label: "王五"
        },
        {
          value: "ZL",
          label: "赵六"
        }
      ]
    };
  },
  methods: {
    handleSubmit(callback) {
      let obj = {
        name: this.formValidate.name,
        displayName: this.formValidate.displayName,
        normalizedName: this.formValidate.name.toLocaleUpperCase(),
        description: '',
        isStatic: true,
        permissions: []
      };
      this.$refs.formvalidate.validate((valid) => {
        if (valid) {
          console.log(obj);
        //   Util.ajax.post("/api/services/app/Role/Create", obj).then(result => {
        //     console.log(result);
        //     this.$Message.success("创建成功!");
        //   });
            this.valids = true
            this.$store.commit('getValid',this.valids)
            callback()
        } else {
            this.$Message.error("表单验证失败!");
            this.valids = false
            this.$store.commit('getValid',this.valids)
        }
      });
    },
    handleReset() {
      this.$refs.formvalidate.resetFields();
    }
  },
  mounted(){
    this.$store.commit('getStepName','formCustom')
    }
    
}
</script>